
<template>
  <div class="jbk">
     <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="content.name" placeholder="查询疾病名"></el-input>
      </el-form-item>
      <el-select v-model="content.clinicDepartmentId" placeholder="">
        <el-option label="请选择科室名" value="请选择科室名">请选择科室名</el-option>
        <el-option :lable="item.name" :value="item.name" v-for="(item) in tclini" :key="item.id">{{item.name}}</el-option>
      </el-select>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >查询</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >添加</el-button>
    </el-container>
    <el-table 
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="tableData">
      <el-table-column label="疾病编码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="疾病名称" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>适用性别:
                  <span v-if="scope.row.gender == 0">女</span>
                  <span v-if="scope.row.gender == 1">男</span>
                  <span v-if="scope.row.gender == 2">不限</span>
                </p>
            <p>就诊科室: {{ scope.row.clinicDepartmentId }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="疾病介绍" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.reason }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.reason }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="建议" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.advise }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.advise }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="医学解释" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.medicalInterpretation }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.medicalInterpretation }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

          <el-button
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" >
        <el-form-item label="疾病名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" style="width: 180px" autocomplete="off" @blur="byid()" :disabled="bj2"></el-input>
        </el-form-item>
        <el-form-item label="适用性别" prop="gender" :label-width="formLabelWidth">
          <el-select v-model="form.gender"   placeholder="请选择">
            <el-option label="不限" value="2">不限</el-option>
            <el-option label="男" value="1">男</el-option>
            <el-option label="女" value="0">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室分类"  prop="clinicDepartmentId"  :label-width="formLabelWidth">
            <el-select v-model="form.clinicDepartmentId" placeholder="请选择科室名">
              <el-option :lable="item.name" :value="item.name" v-for="(item) in tclini" :key="item.id">{{item.name}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="其他名称" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 280px" v-model="form.otherName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="医学解释" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 280px" v-model="form.medicalInterpretation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="常见原因" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 280px" v-model="form.reason" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="建议" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 280px" v-model="form.advise" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updStu()" :disabled="bj1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
export default Vue.extend({
  data(){
    return{
       rules: {
          name: [
            { required: true, message: '不能为空', trigger: 'blur' },
         
          ],
          gender: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          clinicDepartmentId: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          },
      loading:true,
      tableData: [],
      total: 0,
      content: {
        page: 1,
        num: 2,
        name: "",
        clinicDepartmentId:"",
      },
      tclini:[],

      bj1:false,
      bj2:false,
      form:{
        id:'',
        name:'',
        code:'',
        clinicDepartmentId:'',
        gender:'',
        otherName:'',
        medicalInterpretation:'',
        reason:'',
        advise:'',
        createTime:'',
      },
      bj:'',
      formLabelWidth: "80px",
      dialogFormVisible : false,
    }
  },
  methods:{
     resetForm(form) {
        this.$refs[form].resetFields();
      },
    //查询编码是否存在
    byid(){
      axios.get("/api/tdislib/bycode?code="+this.form.name).then(data=>{
        if(data.data==2){
          this.bj1=true;
        }else{
          this.bj1=false;
        }
      })
    },
    //获取每页条数的方法
    handleSizeChange(val) {
      this.content.num = val;
      this.load();
      // console.log(`每页 ${val} 条`);
    },
    //获取当前页的方法
    handleCurrentChange(val) {
      this.content.page = val;
      this.load();
      // console.log(`当前页: ${val}`);
    },
    //多条件查询方法
    onSubmit() {
      this.load();
    },
    //（编辑）
    handleEdit(index, row) {
      this.bj1=false;
      this.bj2=true;
      this.dialogFormVisible=true;
      this.form=row;
      this.form.gender=row.gender.toString();
      this.bj=false;
    },
    //单条套餐删除
    handleDelete(index,row){
      this.$confirm('此操作将永久删除该检查项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios.get("/api/tdislib/delislib?id="+row.id).then(data=>{
            if(data.data==1){
            this.load();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
              }else{
                 this.$message({
                  type: 'info',
                  message: '此检查项已被套餐选择，不能删除!!'
                 }); 
               }
           });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
       //添加
    add() {
      this.form={};
      this.dialogFormVisible = true;
      this.bj=true;
      this.bj2=false;
      
    },
    updStu() {
         this.$refs.form.validate((valid) => {
          if (valid) {
             let upd = new Date();
      var y = upd.getFullYear();
      var m = (upd.getMonth() + 1).toString().padStart(2, "0");
      var d = upd.getDate().toString().padStart(2, "0");
      var tim = y + "-" + m + "-" + d;
     
      if(this.bj){
         this.form.createTime=tim;
        axios.get("/api/tdislib/adddislib?dislib="+JSON.stringify(this.form)).then((data) => {
            if(data.data==1){
                this.$message({
                message: '恭喜你，添加成功！！！',
                type: 'success'
                });
                this.load();
                       this.dialogFormVisible = false

            }
        });
      }else{
        axios.get("/api/tdislib/upddislib?tim="+tim+"&dislib="+JSON.stringify(this.form)).then(data=>{
            if(data.data==1){
                this.$message({
                message: '恭喜你，修改成功！！！',
                type: 'success'
                });
              this.load();
                     this.dialogFormVisible = false

            }
        })
      }
          } else {
            console.log('error submit!!');
            return false;
          }
        });


    
    },
    load(){
      axios.post("/api/tdislib/getall",this.content).then((data) => {
        this.tableData = data.data.rows; 
        this.total = data.data.total; 
        //console.log(data.data)

        //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);
      });
    },
    load1(){
      axios.get("/api/tclinic/findAll").then((data) => {
        this.tclini=data.data;
        //console.log(data.data)
      });
    },
  },
  created(){
    this.content.clinicDepartmentId="请选择科室名"
    this.load();
    this.load1();
  }
})
</script>
<style scoped>

</style>